<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags"%>
<style>
.labelPimpinan {
	margin: 10px 0;
	padding: 5px 15px 5px 5px;
	background-color: #F0F7FD;
	cursor: pointer;
}

.labelPimpinan #idTitle {
	font-size: 18px;
	font-weight: bold;
	margin: 0;
}

.labelHover {
	background-color: #FFF7FD;
}

.pimpinanView,.pimpinanHide,.gantiWarnaPimpinan {
	float: right;
}
</style>

<script>
	$(function() {
		var jump = 255 / $(".labelPimpinan").length;
		$(".labelPimpinan").each(function(index){
		//	alert(index);
			pColor = (index+1) * jump;
			if (index==0 && index % 2 == 0)
				$(this).css("border-left-color","rgb("+pColor+"0,0)");	
			if (index % 2==1)
				$(this).css("border-left-color","rgb(0,"+pColor+",0)");
			if (index % 2==0)
				$(this).css("border-left-color","rgb(0,0,"+pColor+")");
		});
		
		$(".pimpinanHide").hide();
		$(".labelPimpinan").mousemove(function(event) {
			$(this).addClass("labelHover");
		}).mouseout(function(event) {
			$(this).removeClass("labelHover");
		});

		$(".pimpinanView").click(function(event) {
			$(this).hide();
			$(this).siblings(".pimpinanHide").show();
		}).mouseout(function(event) {

		});

		$(".pimpinanHide").click(function(event) {
			$(this).hide();
			//alert(this.id);
			$("." + this.id).remove();
			$(this).siblings(".pimpinanView").show();
		});
	});
</script>

<script>
	$
			.subscribe(
					'handleJsonResult',
					function(event, data) {
						var jabatanId = event.originalEvent.data.jabatanId;
						//alert(jabatanId);

						$
								.each(
										event.originalEvent.data.listAgenda,
										function(index, nilai) {
										//	alert(index);
											var arr = nilai.split("|");
											//	alert(arr);
											var judul = arr[0];

											var dari = arr[1].split(" ");
											var sampai = arr[2].split(" ");
											range = (parseInt(sampai[0]) - parseInt(dari[0]));
											//	alert(range);
											if (!isNaN(range)) {
												for ( var i = parseInt(dari[0]); i <= parseInt(sampai[0]); i++) {
													$("#kal" + i)
															.append(
																	$(
																			"<div id=agendaId'" + index +  "' class='agenda agenda" + jabatanId +"'></div>")
																			.css(
																					"background-color",
																					$(
																							"#pimpinan"
																									+ jabatanId)
																							.css(
																									"border-left-color")));
												}
											}
										});

					});
</script>

<h4>Pimpinan IPB</h4>
<div class="container-fluid">
	<s:iterator var="list" value="listPejabat">

		<s:url id="getAgendaPimpinanUrl" action="smap/agenda/jsonmap"
			escapeAmp="false">
			<s:param name="jabatanId" value="id"></s:param>
		</s:url>

		<div
			style="border-left: 10px solid <s:property value="%{kodeWarna}" />;"
			class="labelPimpinan bs-callout bs-callout-info"
			id="pimpinan<s:property value="%{id}" />">

			<s:property value="%{id}" />
			-
			<s:property value="%{pegawai.nama}" />
			<sj:a href="%{getAgendaPimpinanUrl}"
				cssClass="pimpinanView  icon-eye-close"
				onSuccessTopics="handleJsonResult" dataType="json">
			</sj:a>
			<div class="pimpinanHide icon-eye-open"
				id="agenda<s:property value="%{id}" />"></div>
			<div class="gantiWarnaPimpinan icon-tint"
				id="agenda<s:property value="%{id}" />"></div>
		</div>

	</s:iterator>

</div>
<%-- <s:textfield label="Kode Warna" name="kodeWarnaPimpinan" id="kodeWarnaPimpinan"
		value='#FFFFFF'></s:textfield> --%>
